window.addEventListener('load', function(){
    //1.获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    //获取focus的宽度
    var w = focus.offsetWidth;
    //2.利用定时器自动轮播图片
    var index = 0;
    var timer = setInterval(function(){
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'teanslateX('+translatex + 'px)';
    },2000);
//等着我们过度完成之后,再去判断监听过度完成的事件 transitioned
    ul.addEventListener('transitionend', function(){
    //无缝滚动
    if(index >= 3){
        index == 0;
        //去掉过度效果 这样让我们的ul快速跳到目标位置
        ul.style.transition = 'none';
        //利用最新的索引号乘以宽度  去滚动图片
        var translatex = -index * w;
        ul.style.transform = 'teanslateX('+translatex + 'px)';
    }else if(index < 0){
        index = 2;
        ul.style.transition = 'none';
        //利用最新的索引号乘以宽度  去滚动图片
        var translatex = -index * w;
        ul.style.transform = 'teanslateX('+translatex + 'px)';
    };
    //3. 小圆点跟随变化效果
    //把ol里面li带有current类名的选出来去掉类名 remove
    ol.querySelector('li.current').classList.remove('current');
    //让当前索引号的小li加上 current
    ol.children[index].classList.add('current');
});
//4. 手指滑动轮播图
//触摸元素 touchstart  
var startX = 0;
var moveX = 0;
var flag = false;
ul.addEventListener('touchstart',function(e){
    startX = e.targetTouches[0].pageX;
    clearInterval(timer);
});
//移动手指
ul.addEventListener('touchmove',function(e){
    //计算移动距离
    moveX = e.targetTouches[0].pageX - startX;
    //移动盒子： 盒子原来位置 + 手指移动的距离
    var translatex = -index * w + moveX;
    //手指拖动的时候 不需要动画效果所以要取消过度效果
    ul.style.transition = 'none';
    ul.style.transform = 'teanslateX('+translatex + 'px)';
    flag = true;
    e.preventDefault();
});
ul.addEventListener('touchend',function(e){
    if(flag){
        //(1)如果移动距离大于50像素我么就播放一张或者下一张
    if(Math.abs(moveX) > 50){
        //如果是右滑  播放上一张 moveX是正值
        if(moveX > 0){
            index--;
        }else{
        //如果是左滑  播放下一张  moveX是负值
            index++;
        }
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'teanslateX('+translatex + 'px)';

    }else {
        //(2) 如果小于50像素我们就回弹
        var translatex = -index * w;
        ul.style.transition = 'all .1s';
        ul.style.transform = 'teanslateX('+translatex + 'px)';

    }
    }
    //当我们手指离开重新开启定时器
    clearInterval(timer);
    timer = setInterval(function(){
        index++;
        var translatex = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'teanslateX('+translatex + 'px)';
    },2000);
});
    //返回顶部模块
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function(){
        if(this.window.pageYOffset >= nav.offsetTop){
            goBack.style.display = 'block';
        }else{
            goBack.style.display = 'none';

        }
    });
    goBack.addEventListener('click', function(){
        window.scroll(0,0);
    })
});